<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <table border="1">
    <tr><th>id</th><th>标题</th><th>价格</th><th>库存</th><th>操作</th></tr>
      <tr v-for="p in arr">
          <td>{{p.id}}</td>
          <td>{{p.title}}</td>
          <td>{{p.price}}</td>
          <td>{{p.num}}</td>
          <!--删除超链接 废掉跳转功能 点击时把这一行对应的商品id传递过去-->
          <td>
              <!--属性中出现变量的话必须使用属性绑定,在属性名前面加: -->
              <a :href="'/update.html?id='+p.id">修改</a>
              <a href="javascript:void(0)" @click="del(p.id)">删除</a>
          </td>
      </tr>
  </table>
</div>
<!--引入axios和vue框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
          arr:[]
        },
        methods: {
            del(id){
                if (confirm("您确认删除此商品吗?")){
                    //发出异步get请求
                    axios.get("/delete?id="+id).then(function (response) {
                        //只要此处代码执行就代表删除成功 response可写可不写
                        location.reload();//刷新页面
                    })
                }
            }
        },
        created:function () {
            //此方法是Vue对象初始化过程中的方法,会由Vue对象调用,进入到页面立即发请求的
            //代码写在此方法中
            //发请求获取所有商品数据 把数据赋值给arr数组 页面会自动显示出查询到的商品
            axios.get("/select").then(function (response) {
                //服务器响应回来的是多个商品的信息 直接赋值给arr
                //服务器响应的多个商品信息是保存在一个JSON格式的字符串里面的
                //Axios框架当发现是装着多个商品信息的Json字符串时
                // 会自动将其转成JavaScript语言中的数组
                v.arr = response.data;
            })
        }
    })
</script>
</body>
</html>